<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
border:1px solid #ccc;
background-color:#eee;

}

.b{
height:50px;
border:1px solid #ccc;
background-color:red;

}
	</style>
	
	</head>
<body >

<div class="container a">

div容器 是固定宽度的
class="container a" 是a种样式
</div>

<br/>
<div class="container">
	<div class="row">
		<div class="col-md-1 a">class="row"是创建一行</div>
		<div class="col-md-1 a"><span style="font-size:10px">col-md-1 表示占1/12的位置</span></div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
		<div class="col-md-1 a">1</div>
	</div>
	<div class="row">
		<div class="col-md-1 a">col-md-1 1是一个格</div>
		<div class="col-md-1 b">3</div>
	</div>
	
	
	<div class="row">
		<div class="col-md-9 a">9</div>
		<div class="col-md-3 a">3</div>
	</div>
	<div class="row">
		<div class="col-md-4 a">4</div>
		<div class="col-md-4 a">4</div>
		<div class="col-md-4 a">4</div>
	</div>
</div> 

大屏幕例子
<div class="container">
	<div class="row">
        <div class="col-lg-3 a">大屏幕 占1/4</div>
		<div class="col-lg-3 b">大屏幕 占1/4</div>
		<div class="col-lg-3 a">大屏幕 占1/4</div>
	</div>
</div>

在大屏幕时显示4个  中屏幕时显示3个 平板时每行2个 手机屏幕也是2个

<div class="container">
	<div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">大屏幕 占1/4</div>
		<div class="col-lg-3 col-md-4 col-sm-6  col-xs-6 a">大屏幕 占1/4</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">大屏幕 占1/4</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">大屏幕 占1/4 中屏幕是会拐到第二行</div>
	</div>
</div>
<br/>


<!-- <div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
		<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
	</div>
</div> -->
<br/>列偏移 col-md-offset-1 md 是与前面保持一致，1是偏移一个格
<div class="container">
	<div class="row">
		<div class="col-md-8 a">8</div>
		<div class="col-md-3 col-md-offset-1 a">3</div>
	</div>
	
	<br/>嵌套 在9里嵌套 3个  style="padding:0 是取消空格
	<div class="row">
		<div class="col-md-9 a" style="padding:0">
			<div class="col-md-4 a">4</div>
			<div class="col-md-4 a">4</div>
			<div class="col-md-4 a">4</div>
		</div>
		<div class="col-md-3 a">3</div>
	</div>
	
	<br/>嵌套 在9里嵌套 3个  对比不取消空格
	<div class="row">
		<div class="col-md-9 a">
			<div class="col-md-4 b">4个</div>
			
			<div class="col-md-4 a">4</div>
			<div class="col-md-4 b">4c</div>
			
			
		</div>
		<div class="col-md-3 a">3</div>
	</div>
	
	换位
	<div class="row">
		<div class="col-md-9 col-md-push-3 a">9</div>
		<div class="col-md-3 col-md-pull-9 a">3</div>
	</div>
</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">各种色调的字体</p>

<p class="text-muted">Bootstrap 视频教程  灰</p> 
<p class="text-primary">Bootstrap 视频教程  text-primary 蓝</p>
 <p class="text-success">Bootstrap 视频教程 text-success 绿</p> 
 <p class="text-info">Bootstrap 视频教程 text-info 蓝</p>

<p class="text-warning">Bootstrap 视频教程 text-warning 黄</p>
 <p class="text-danger">Bootstrap 视频教程</p>
 
 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">各种色调的背景</p>

<p class="bg-muted">Bootstrap 视频教程  灰</p> 
<p class="bg-primary">Bootstrap 视频教程  text-primary 蓝</p>
 <p class="bg-success">Bootstrap 视频教程 text-success 绿</p> 
 <p class="bg-info">Bootstrap 视频教程 text-info 蓝</p>

<p class="bg-warning">Bootstrap 视频教程 text-warning 黄</p>
 <p class="bg-danger">Bootstrap 视频教程</p>
 
 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">关闭按钮</p>
<button type="button" class="close">&times;关闭按钮在这里</button>

 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">三角符号</p>

三角符号 符号之前<span class="caret">三角符号</span>《在符号之后三角符号
<br/><br/><br/><br/><br/>
 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">div 浮动</p>
<div class="pull-left a">左边</div> 
<div class="pull-right b">右边</div>

 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">块级居中</p>

<div class="center-block a">居中</div>

注：就是 margin:x auto；并且设置了 display:block;。








<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>
</body>
</html>